<template>
  <div class="home">
    <div class="home_top">
      <div class="home_top_left">
        <p class="one">金缮·尽美</p>
        <p class="two">将破损的文化重新拾起</p>
        <img class="three" src="../assets/logo.png" />
      </div>
      <div class="home_top_right">
        <img src="../assets/home-top01.jpg" />
        <img src="../assets/home_top02.jpg" />
      </div>
    </div>
    <div class="home_center">
      <div class="home_center_left">
        <p class="one">{{video}}</p>
        <p class="two">优秀修缮师现场教学筑梦天下学子</p>
        <p class="three"><Icon type="videocamera"></Icon></p>
      </div>
      <div class="home_center_right">
        <div class="home_center_right_top">
          <div class="home_center_right_top_left">
            <p class="four">众筹</p>
            <p class="five">被废为宝</p>
          </div>
          <div class="home_center_right_top_right">
            <img src="../assets/home_center_top.jpg" />
          </div>
        </div>
        <div class="home_top_right_bottom">
          <div class="home_top_right_bottom_left">
            <p class="six">{{collection}}</p>
            <p class="seven">锻炼你的眼光</p>
          </div>
          <div class="home_top_right_bottom_right">
            <img src="../assets/home_center_right_bottom.jpg" />
          </div>
        </div>
      </div>
    </div>
    <div class="home_bottom">
      <div class="home_bottom_left">
        <div class="home_bottom_left_left">
        <p class="eight">搭伙</p>
        <p class="nine">与好友一起鉴赏好作品</p>
        </div>
        <div class="home_bottom_left_right">
          <img src="../assets/cooperation.jpg" />
        </div>
      </div>
      <div class="home_bottom_right">
       <p class="eleven">社区交流</p>
       <p class="twelve">一起交流，一起进步</p>
        <img src="../assets/community.jpg" />
      </div>
      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        video:'视频',
        collection:'押宝'
      }
    },
    computed:{
      ...mapState([]),

    },
    created(){

    },
    methods:{

    },
    watch:{

    }
  }

</script>

<style scoped>
  .home img{display: block;}
  .home_top,.home_center{border-bottom: 1px solid gainsboro;overflow: hidden;}
  .home_top_left{font-family: Helvetica Neue;margin: 5%;float: left;width: 40%;}
  .home_top_left .one,.home_center .one,.home_center_right_top_left .four,.home_top_right_bottom_left .six,.home_bottom_left_left .eight,.home_bottom_right .eleven{font-size: 17px;color: #ff200d;font-weight: bolder;padding-top: 10px;}
  .home_bottom_left_left{margin-top: -10px;}
  .home_bottom_left_left .eight,.home_bottom_left_left .nine{margin-top: 10px;}
  .home_top_left .two{font-weight: bolder;font-size: 14px;}
  .home_top_left .three{width: 50px;height: 50px;}
  .home_top_right{float: right;width: 50%;margin-top: 50px;}
  .home_top_right img{width: 50%;height: 50px;float: left;}
  .home_center_left{padding-left:10px;width: 53%;float: left;border: 1px solid gainsboro;}
  .home_center_left .two,.home_center_right_top_left .five{padding-top: 10px;}
  .home_center_left .three{font-size: 60px;text-align: center;padding-top: 10px;}
  .home_center_right_top,.home_top_right_bottom {overflow: hidden;border-bottom: 1px solid gainsboro;float: left;width: 47%;}
  .home_center_right_top_left{padding-left: 10px;float: left;width: 50%;height: 83px;}
  .home_bottom_left{padding-left: 10px;float: left;width: 53%;border-right: 1px solid gainsboro;}
  .home_top_right_bottom{float: right;border-bottom: none;}
  .home_top_right_bottom_left{width: 50%;float: left;padding-left: 10px;padding-top: 10px;}
  .home_center_right_top_right img,.home_top_right_bottom_right img,.home_bottom_left_right img{float: left;width: 50%;margin-top: 10px;}
  .home_top_right_bottom_right img,.home_bottom_left_right img{height: 60px;}
  .home_bottom_left_right{overflow: hidden;}
  .home_bottom{border-bottom:1px solid gainsboro; }
  .home_bottom_right{width: 45%;float: right;}
  .home_bottom_right .twelve{padding-top: 10px;}
  .home_bottom_right img{height: 70px;width: 100%;}
</style>
